const piePatternSrc = 'img/echarts/pie.jpg';
const piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
var option = {
    // title: {
    //      text: '饼图纹理',
    //      textStyle: {
    //           color: '#235894'
    //      }
    // },
    tooltip: {},
    series: [{
        name: 'pie',
        type: 'pie',
        selectedMode: 'single',
        selectedOffset: 30,
        clockwise: true,
        label: {
            fontSize: 18,
            color: '#235894'
        },
        labelLine: {
            lineStyle: {
                color: '#235894'
            }
        },
        data: [{
                value: 1048,
                name: 'Search Engine'
            },
            {
                value: 735,
                name: 'Direct'
            },
            {
                value: 580,
                name: 'Email'
            },
            {
                value: 484,
                name: 'Union Ads'
            },
            {
                value: 300,
                name: 'Video Ads'
            }
        ],
        itemStyle: {
            opacity: 0.7,
            color: {
                image: piePatternImg,
                repeat: 'repeat'
            },
            borderWidth: 3,
            borderColor: '#235894'
        }
    }]
}
var option2 = {
    // title: [
    //   {
    //     text: 'Tangential Polar Bar Label Position (middle)'
    //   }
    // ],
    polar: {
        radius: [30, '80%']
    },
    angleAxis: {
        max: 5,
        startAngle: 75
    },
    radiusAxis: {
        type: 'category',
        data: ['a', 'b', 'c', 'd']
    },
    tooltip: {},
    series: {
        type: 'bar',
        data: [2, 1.2, 2.4, 3.6],
        coordinateSystem: 'polar',
        label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
        }
    }
};

// 获取url里key后面的值
function getParams(key) {
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
};

let uuid = getParams("uuid");
let duoList = [];
// console.log(uuid);
let wenjuan = JSON.parse(localStorage.getItem("questionData"))[uuid]
// console.log(wenjuan);
// console.log(JSON.parse(wenjuan.problems));
let showdatalist = new Array();

window.onload = function () {
    for (let index = 0; index < JSON.parse(wenjuan.problems).length; index++) {
        let qwq = JSON.parse(wenjuan.problems)[index]
        // console.log(qwq);
        let targer = document.getElementById("main");

        let timu;
        if (qwq.problemType == "1") {
            timu = "(单) " + qwq.problem;
        } else if (qwq.problemType == "2") {
            timu = "(多) " + qwq.problem;
        } else if (qwq.problemType == "3") {
            timu = "(文) " + qwq.problem;
        };

        let xuanxiang = '';
        if (qwq.problemType == "1" || qwq.problemType == "2") {
            let index2 = 0
            for (const key in qwq.detail) {
                xuanxiang += "<div><strong>" + String.fromCharCode('A'.charCodeAt(0) + index2) + "</strong>&nbsp;&nbsp;&nbsp;" + qwq.detail[key] + "</div>";
                index2++;
            }
        } else {
            let datishuju = wenjuan.data[index].datatext;
            // console.log(datishuju);
            datishuju.forEach(element => {
                // console.log(element);
                xuanxiang += "<div>答：" + element + "</div>";
            });
        }

        // let datafenxi = generateUUID();
        // duoList.push(datafenxi);
        let insertdata = "  \
        <div class=\"question_box clearfix\">     \
             <div class=\"red\">   \
                  Q&nbsp;<em>" + Number(index + 1) + "</em>   \
             </div>    \
             <div class=\"green\"> \
                  <div class=\"question_type\">" + timu + "</div> \
                  " + xuanxiang + "   \
             </div>    \
             <div class=\"blue\">  \
                  <div class=\"question_type\">数据占比</div>    \
                  <div id=" + (index + 1) + " style=\"width: 316px; height: 170px;\"></div>  \
             </div>    \
        </div>    \
        ";

        document.getElementById("main").innerHTML += insertdata;



        // 设置数据
        // console.log(wenjuan.data[index]);
        let thisquesdata = wenjuan.data[index]
        let chartdata = new Array();
        if (qwq.problemType == "3") {
            // console.log(thisquesdata)
            // console.log(thisquesdata.writerNum);
            // console.log(thisquesdata.datatext.length);

            let tempdata1 = {}
            tempdata1.name = '有效答题'
            tempdata1.value = thisquesdata.datatext.length
            chartdata.push(tempdata1)
            let tempdata2 = {}
            tempdata2.name = '无效答题'
            tempdata2.value = thisquesdata.writerNum - thisquesdata.datatext.length
            chartdata.push(tempdata2)
        } else {
            for (const key in thisquesdata) {
                if (Object.hasOwnProperty.call(thisquesdata, key)) {
                    // 单选多选
                    let tempdata = {}
                    tempdata.name = key
                    tempdata.value = thisquesdata[key]
                    chartdata.push(tempdata)
                }
            }
        }

        // console.log(chartdata);
        showdatalist.push(chartdata)
        // console.log(showdatalist);
    }


    for (let index = 0; index < JSON.parse(wenjuan.problems).length; index++) {
        let myChart = echarts.init(document.getElementById(index + 1));

        option.series[0].data = showdatalist[index]
        // console.log(option);
        myChart.setOption(option)
    }

}